<template>
  <div class="mydata">
    爷爷
    <button @click="change($refs)">点我改变</button>

    <BaBa ref="baba" :xie="xie" :tao="tao" :c="c" :obj="obj" :show="show"></BaBa>
  </div>
</template>

<script setup lang="ts">
import BaBa from './BaBa.vue'
import { ref, reactive } from 'vue'

const xie = ref('xie')
const tao = ref('tao')
const c = ref('CC')
const obj = reactive({ xie: '谢', tao: '涛' })

const username = '小谢'
const show = () => {
  console.log('show')
}
const change = (refs) => {
  console.log('改变xie的值', refs.baba.book)
  refs.baba.book++
}

defineExpose({ username })
</script>

<style scoped>
.mydata {
  background-color: #ccc;
  height: 600px;
  margin-left: 300px;
}
</style>